<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- rel="stylesheet" 这个不能少，否则页面无法加载css文件 -->
    <!--    <link href="../frm/sweetalert2/css/sweetalert2.css" rel="stylesheet" type="text/css"></link>-->
    <link href="../frm/sweetalert2/css/dark/dark.css" rel="stylesheet" type="text/css"></link>
    <style>

    </style>

</head>
<body>
<div id="app">
    <t0></t0>
    <t1>
        <template slot-scope="t1Data">
            <h1>{{ t1Data }}</h1>
        </template>
    </t1>
</div>
<script src="../frm/sweetalert2/js/sweetalert2.js"></script>
<script src="../frm/vue.js"></script>
<script src="../frm/vue-router.js"></script>

<script type="module">
    Vue.config.productionTip = false
    let t0 = {
        template: "<h1>Hello</h1>"
    }

    let t1 = {
        template: `
          <div>
          <h1>Hello</h1>
          <slot :langs="langs"></slot>
          </div>`,
        data() {
            return {langs: ["C++", "C", "Java", "Kotlin", "Nasm"]};
        }

    }

    new Vue({
        el: "#app",
        methods: {},
        components: {
            t0,
            t1,
        }
    });


</script>

</body>
</html>
